<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 个人中心 开发者: 麦沃德科技-半夏  
+---------------------------------------------------------------------- -->

<template>
	<view class="container safe-padding" :style="{'--theme-color': themeColor}">
		<!-- 标题栏 -->
		<title-bar title="个人中心" :backgroundColor="titleBackground"></title-bar>
		<!-- 页面内容 -->
		<view class="container-main">
			<!-- 用户信息 -->
			<user-info></user-info>
			<!-- 工具菜单 -->
			<view class="main-menu">
				<menu-system :show-data="systemMenu || []"></menu-system>
			</view>
			<!-- 备案号 -->
			<view class="main-statement" v-if="statement">备案号：{{statement}}</view>
		</view>
		<!-- 底部导航 -->
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	import svgData from "@/common/svg.js"
	import titleBar from "@/pages/component/title-bar/title-bar.vue"
	import userInfo from "@/pages/driver/component/user-info/user-info.vue"
	import menuSystem from "@/pages/component/menu/tool.vue"
	import tabBar from "@/pages/component/tab-bar/tab-bar.vue"
	export default {
		components: {
			titleBar,
			userInfo,
			menuSystem,
			tabBar,
		},
		data() {
			return {
				// 标题栏背景颜色
				titleBackground: "transparent",
			}
		},
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
				token: state => state.user.token,
				statement: state => state.app.statement,
				shareTitle: state => state.app.shareTitle,
				shareImage: state => state.app.shareImage,
				systemMenu: state => {
					return [{
							icon: svgData.svgToUrl("driver_wallet", state.app.themeColor),
							text: "我的钱包",
							info: {
								mode: 1,
								path: "/pages/driver/mine/wallet/index",
								isToken: true,
								permission: true,
							},
						},
						{
							icon: svgData.svgToUrl("driver_auth", state.app.themeColor),
							text: "认证信息",
							info: {
								mode: 1,
								path: "/pages/driver/mine/authentication/index",
								isToken: true,
							},
						},
						{
							icon: svgData.svgToUrl("driver_order", state.app.themeColor),
							text: "代驾订单",
							info: {
								mode: 1,
								path: "/pages/driver/mine/order/index",
								isToken: true,
								permission: true,
							},
						},
						{
							icon: svgData.svgToUrl("driver_statistics", state.app.themeColor),
							text: "订单统计",
							info: {
								mode: 1,
								path: "/pages/driver/mine/statistics/index",
								isToken: true,
								permission: true,
							},
						},
						{
							icon: svgData.svgToUrl("driver_security", state.app.themeColor),
							text: "安全中心",
							info: {
								mode: 1,
								path: "/pages/driver/mine/security/index",
								isToken: true,
							},
						},
						{
							icon: svgData.svgToUrl("driver_contact", state.app.themeColor),
							text: "平台客服",
							info: "contact",
						},
						{
							icon: svgData.svgToUrl("driver_settings", state.app.themeColor),
							text: "系统设置",
							info: {
								mode: 1,
								path: "/pages/driver/mine/settings/system",
							},
						},
					]
				}
			})
		},
		onPageScroll(e) {
			const scrollTop = e.scrollTop
			if (scrollTop > 100) {
				this.titleBackground = "#fff"
			} else {
				let opacity = parseFloat(scrollTop / 100).toFixed(4)
				this.titleBackground = "rgba(255, 255, 255, " + opacity + ")"
			}
		},
		onShow() {
			if (uni.getStorageSync("token")) {
				this.getUserInfo()
			}
		},
		onPullDownRefresh() {
			if (uni.getStorageSync("token")) {
				this.getUserInfo(() => {
					uni.stopPullDownRefresh()
				})
			} else {
				uni.stopPullDownRefresh()
			}
		},
		onShareAppMessage() {
			return {
				title: this.shareTitle,
				imageUrl: this.shareImage,
			}
		},
		onShareTimeline() {
			return {
				title: this.shareTitle,
				imageUrl: this.shareImage,
			}
		},
		methods: {
			// 获取用户信息
			getUserInfo(fn) {
				this.$util.request("driver.user").then(res => {
					if (fn) fn()
					if (res.code == 1) {
						uni.setStorageSync("userInfo", res.data)
						this.$store.commit('user/setUserInfo', res.data)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					if (fn) fn()
					console.error('获取用户信息 ', error)
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 0;
	}

	.container {
		min-height: 100vh;
		position: relative;
		background: linear-gradient(180deg, var(--theme-color) -100%, #FFF 100%);

		.container-main {
			padding: 0 32rpx 32rpx;

			.main-menu {
				border-radius: 32rpx;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.20) 100%);
				padding: 8rpx 32rpx;
				margin-top: 32rpx;
			}

			.main-statement {
				font-size: 24rpx;
				line-height: 34rpx;
				color: #8D929C;
				margin-top: 48rpx;
				text-align: center;
			}
		}
	}
</style>